<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<!-- 移动设备的支持 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- ie8 标准版的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<title>个人博客-首页</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/style1.css"/>
		<link rel="icon" href="img/面具.ico" type="image/x-icon">
		<link rel="shortcut icon" href="img/面具.ico" type="image/x-icon">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				zoom:1.1;
			}
			.list-group-item li{
				text-overflow: ellipsis;
				white-space:nowrap;       /* 不换行*/
				overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
			}
		</style>
	</head>
	<c:if test="${empty page}">
		<c:redirect url="index.do"></c:redirect>
	</c:if>
	<body >
		<!-- 导航条 -->
		<div class="head-nav"></div>
		<!-- 导航条结束 -->
		<div class="container" id="app">
			<div class="row" style="margin-top: 16px;">
				<div class="col-sm-12 col-xs-12 col-xs-pull-1 col-md-8 col-sm-pull-0 " id="leftcontent">
					<div id="context">
						<h2 class="title">最新内容</h2>
						<i class="title-underline"></i>
						<!-- 中间主体内容 -->
						<ul>
							<li v-for="item in page.contentList">
								<h4 class="bolgtite"><a :href="'info.do?aid='+item.aid" >{{item.title}}</a></h4>
								<div class="row">
								  <div class=" col-md-3" >
								    <a :href="'info.do?aid='+item.aid" class="thumbnail">
								      <img :src="item.img" alt="">
								    </a>
								  </div>
								  <div class=" col-md-8">
								  	<p class="contextP" v-html="item.summary"></p>
								  	<p class="lastP">
										<i><a href="aboutme.html"><img src="http://q1.qlogo.cn/g?b=qq&nk=785001593&s=100" class="img-circle" width="30" height="30"></a></i>
											<span>{{item.author}}</span> <span>{{item.createTime}}</span> <span>【个人笔记】</span>
										</p>
										<a :href="'info.do?aid='+item.aid" class="btn btn-info btn-xs pull-right">查看更多</a>
								  </div>
								</div>
							</li>
						</ul>
						<!-- 中间主体内容结束 -->
						<nav aria-label="">
						  <ul class="pager">
						    <li class="previous"><a href="javascript:void(0)" class="btn" @click="prevPage(page.indexPage)" :class="page.indexPage==1?'disabled':''"><span aria-hidden="true">&larr;</span> 上一页</a></li>
						    <li class="next" ><a href="javascript:void(0)"  class="btn" @click="nextPage(page.indexPage)" :class="page.indexPage+1>page.totalPageCount?'disabled':''">下一页 <span aria-hidden="true">&rarr;</span></a></li>
						  </ul>
						</nav>
					</div>
				</div>
				<div class="col-md-3 hidden-sm hidden-xs"  id="else">
					<div id="resume" >
						<h4>我的名片</h4>
						<p>职业：学生</p>
						<p>现居：四川省-成都市</p>
						<p>网站：www.clhweb.club</p>
						<img src="img/%7D%7DZQ1ERCONQ($GCRAY6SU%60F.png" width="70" >
						<ul>
							<li><a href="#" class="btn  btn-lg" title="网站地址" data-toggle="tooltip" data-placement="top"><span class="glyphicon glyphicon-home"></span></a></li>
							<li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=LBsUGRwcHRkVH2xdXQJPQ0E" target="_blank" class="btn  btn-lg" title="我的邮箱" data-toggle="tooltip" data-placement="top"><span class="glyphicon glyphicon-envelope"></span></a></li>
							<li><a href="#" class="btn btn-lg" title="QQ联系我" data-toggle="tooltip" data-placement="top"><span class="glyphicon glyphicon-user"></span></a></li>
							<li><a href="#" class="btn btn-lg" ><span class="glyphicon glyphicon-comment"></span></a></li>
						</ul>
					</div>
					<p class="segmentation" >&nbsp;</p>
					<div >
						<h2 class="title">最新更新</h2>
						<i class="title-underline"></i>
						<div class="list-group">
						  <a v-for="item,index in upToDate" :href="'info.do?aid='+item.aid" class="list-group-item" 
						  :class="index==0?'list-group-item-success':(index==1?'list-group-item-info':(index==2?'list-group-item-warning':'list-group-item-danger'))"><li>{{item.title}}</li></a>
						</div>
					</div>
					<p class="segmentation" >&nbsp;</p>
					<div >
						<h2 class="title">站点统计</h2>
						<i class="title-underline"></i>
						<div>
							<p><b>本站运行了：<span id="dateTime"></span></b></p>
							<p><b>网站程序：javaEE Tomcat jsp </b></p>
							<p><b>文章统计：{{page.totalCount}}</b></p>
							<p><b>总访问量：${totalConsult}</b></p>
							<p><b>这梦想：不休</b>不止</p>
							<ul class="list-unstyled list-inline" id="xingUl">
								<li id="bule">
									<a href="aboutme.html">
									<div class="ul-bg">
										<h3>关于我</h3>
										<img src="img/wjx-wh.png" >
									</div>
									</a>
								</li>
								<li id="red">
									<a href="catalog.jsp">
									<div class="ul-bg">
										<h3>文章目录</h3>
										<img src="img/wjx-wh.png" >
									</div>
									</a>
								</li>
								<li id="yellow">
									<a href="#">
									<div class="ul-bg">
										<h3>感谢</h3>
										<img src="img/wjx-wh.png" >
									</div>
									</a>
								</li>
								<li id="green">
									<a href="#">
									<div class="ul-bg">
										<h3>来访</h3>
										<img src="img/wjx-wh.png" >
									</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="myfooter text-center"></div>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const PAGE=${page};
		const UPTODATE=${upToDate};
	</script>
	<script src="js/index-v.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
